var question = []
var answer = []
var user_input = []
var sec = 0;
function showgrade(){
    function ok(){
        console.log("Success" + this.responseText);
        let res_object = JSON.parse(this.responseText);
        let grade = res_object['grade'];
        let wrong_id = res_object['wrongid'];
        let total =  res_object['total'];
        let TLE;
        answer = res_object['correct'];
        user_input = res_object['user_input'];
        sec = localStorage.getItem('countdown');
        if(5 <= sec && sec <= 20){
            TLE = res_object['TLE'];
        }

        document.getElementById('greeting').innerHTML = "HI! ";
        if(localStorage.hasOwnProperty("UserName")){
            document.getElementById('greeting').innerHTML += localStorage.getItem("UserName");
        }
        
        document.getElementById('score_detail').innerHTML = grade + '/' + total;
        for(var i = 0; i < wrong_id.length; i++){
            let wrong_answer_index = wrong_id[i];
            let p = document.createElement('p');
            p.innerHTML = 'Qusetion: ' + question[wrong_answer_index];
            
            let span1 = document.createElement('span');
            span1.style.color = 'red';
            span1.innerHTML = ' <br>Your answer: ' + user_input[wrong_answer_index];

            let span2 = document.createElement('span');
            span2.style.color = 'green';
            span2.innerHTML = ' Correct answer: ' + answer[wrong_answer_index];

            p.appendChild(span1);
            p.appendChild(span2);
            document.getElementById('grade').append(p);
        }

        if(5 <= sec && sec <= 20){
            for(var i = 0; i < TLE.length; i++){
                let wrong_answer_index = TLE[i];
                let p = document.createElement('p');
                p.innerHTML = 'Qusetion: ' + question[wrong_answer_index];
                
                let span1 = document.createElement('span');
                span1.style.color = 'orange';
                span1.innerHTML = ' <br>[Time Limit Exceeded]          Your answer: ' + user_input[wrong_answer_index];
    
                let span2 = document.createElement('span');
                span2.style.color = 'green';
                span2.innerHTML = ' Correct answer: ' + answer[wrong_answer_index];
    
                p.appendChild(span1);
                p.appendChild(span2);
                document.getElementById('grade').append(p);
            }
        }

        let url = localStorage.getItem('recordhistory_url');
        url += '&score=' + grade;
        ajaxRequest(url, 'get', null, function(){
            console.log(this.responseText);
            localStorage.removeItem('recordhistory_url');
        }, function(){
            console.log("error: " + this.responseText)
        });

        localStorage.removeItem('category');
        localStorage.removeItem('level');
        localStorage.removeItem('size');
        localStorage.removeItem('countdown');
        if(localStorage.hasOwnProperty('property')){
            localStorage.removeItem('property');
        }
    }

    function ko(){
        console.log("Something wrong with calculating grade");
    }

    ajaxRequest("../php/calculate.php", 'get', null, ok, ko);
}

window.onload = function(){
    function isLogin(){
        if(localStorage.hasOwnProperty("UserName")){
            document.getElementById("login").style.display = 'none';
            document.getElementById("login-out").style.display = 'block';
            document.getElementById("profile").style.display = 'block';
            document.querySelector("#profile a").innerHTML = 'User: ' + localStorage.getItem('UserName');
        }
        else{
            document.getElementById("login-out").style.display = 'none';
            document.getElementById("login").style.display = 'block';
            document.getElementById("profile").style.display = 'none';
        }
    }
    isLogin();
    question = JSON.parse(localStorage.getItem("json_quiz"))['question'];
    showgrade();
}